<template>
	<view class="content">
		<view class="contentbox" :style="'height:'+headHeight+'px;background-color: rgba(255, 255, 255, '+nums+')'">
			<view class="container" :style="'height:'+navBarHeight+'px;top:'+imageTop+'px;'">
				<image :src="imageUrl +'head.png'" mode="widthFix" class="logo"></image>
				<image :src="imageUrl +'code.png'" mode="widthFix" class="seandcode" :style="'margin-right:'+right+'px;'"
					v-if="false">
				</image>
			</view>
		</view>
		<image :src="imageUrl +'bg.png'" mode="widthFix" class="bg-img"></image>
		<view class="nos" :style="'margin-top: '+headHeight+'px;'"></view>
		<view class="card" v-if="platesNums.length == 0">
			<image :src="imageUrl +'bg2.png'" mode="widthFix" class="bg2-img" v-if="false"></image>
			<image :src="imageUrl +'bg3.png'" mode="widthFix" class="bg3-img"></image>
			<!-- <view class="address-box" @click="showAlert"> -->
			<view class="address-box">
				<image :src="imageUrl +'address.png'" mode="widthFix" class="address-img"></image>
				<view>湖北省</view>
				<image :src="imageUrl +'down.png'" mode="widthFix" class="tab-img"></image>
			</view>
			<view class="cart-box top1">
				<view class="cart-detail">
					<view class="head-name">暂无绑定车牌</view>
					<view class="go" @click="goNext('/pages/vehiclemanagement/vehiclemanagement')">
						<view>去绑定</view>
						<image :src="imageUrl +'next.png'" mode="widthFix" class="next-img"></image>
					</view>
				</view>
			</view>
			<image :src="imageUrl +'cart.png'" mode="widthFix" class="cart-img"></image>
		</view>
		<view class="card" v-if="platesNums.length != 0  && rodeOrderList.length == 0">
			<image :src="imageUrl +'bg2.png'" mode="widthFix" class="bg2-img"></image>
			<image :src="imageUrl +'bg3.png'" mode="widthFix" class="bg3-img"></image>
			<image :src="imageUrl +'success.png'" mode="widthFix" class="certification" v-if="false"></image>
			<view class="address-box" @click="showAlert">
				<image :src="imageUrl +'address.png'" mode="widthFix" class="address-img"></image>
				<view>湖北省</view>
				<image :src="imageUrl +'down.png'" mode="widthFix" class="tab-img"></image>
			</view>
			<view class="cart-box top2">
				<view class="cart-detail">
					<view class="head-name" v-if="false">{{ hasOrderPlate }}</view>
					<view class="number">{{ hasOrderPlateStr }}</view>
					<view class="timing">
						您没有待支付道路停车订单
					</view>
				</view>
			</view>
			<image :src="imageUrl +'cart1.png'" mode="widthFix" class="cart-img"></image>
			<view class="prompt" v-if="false">开通无感支付，体验快捷出场</view>
		</view>
		<view class="card" v-if="platesNums.length != 0 && rodeOrderList.length">
			<image :src="imageUrl +'bg2.png'" mode="widthFix" class="bg2-img"></image>
			<image :src="imageUrl +'bg3.png'" mode="widthFix" class="bg3-img"></image>
			<image :src="imageUrl +'success.png'" mode="widthFix" class="certification" v-if="false"></image>
			<view class="address-box" @click="showAlert">
				<image :src="imageUrl +'address.png'" mode="widthFix" class="address-img"></image>
				<view>湖北省</view>
				<image :src="imageUrl +'down.png'" mode="widthFix" class="tab-img"></image>
			</view>
			<view class="cart-box">
				<view class="cart-detail">
					<view class="number">{{ hasOrderPlateStr }}</view>
					<view class="timing">
						您有
						<text>{{ rodeOrderList.length }}</text>
						笔待支付道路停车订单
					</view>
					<view class="number" v-if="false">{{ rodeOrderList[0].plate }}</view>
					<view class="timing" v-if="false">
						<text>{{ result.hours }}</text>
						小时
						<text>{{ result.minutes }}</text>
						分钟
					</view>
					<view class="time" v-if="false">入场时间:{{ rodeOrderList[0].inTime }}</view>
					<view class="go pay" @click="goPay">
						<view>立即支付</view>
						<image :src="imageUrl +'next.png'" mode="widthFix" class="next-img"></image>
					</view>
				</view>
			</view>
			<image :src="imageUrl +'cart1.png'" mode="widthFix" class="cart-img"></image>
			<view class="prompt" v-if="false">开通无感支付，体验快捷出场</view>
		</view>
		<view class="classification-box">
			<view class="classification-detail" @click="tab('/pages/parkingPlace/parkingList')">
				<image :src="imageUrl +'a1.png'" mode="widthFix"></image>
				<view>找车位</view>
			</view>
			<view class="classification-detail" @click="goNext('/pages/vehiclemanagement/vehiclemanagement')">
				<image :src="imageUrl +'a2.png'" mode="widthFix"></image>
				<view>车辆管理</view>
			</view>
			<view class="classification-detail" @click="goNext('/pages/electronicInvoice/electronicInvoice')">
				<image :src="imageUrl +'a3.png'" mode="widthFix"></image>
				<view>电子发票</view>
			</view>
			<view class="classification-detail" @click="goNext2('/pages/outlets/list')">
				<image :src="imageUrl +'a4.png'" mode="widthFix"></image>
				<view>充电网点</view>
			</view>
			<!--<view class="classification-detail" @click="goNext('/pages/activation/activation')">
        <image :src="imageUrl +'a9.png'" mode="widthFix"></image>
        <view>无感开通</view>
      </view>-->
			<!--<view class="classification-detail" @click="goNext('/pages/contactcustomer/textinput')" v-if="false">
        <image :src="imageUrl +'a5.png'" mode="widthFix"></image>
        <view>联系客服</view>
      </view>-->
			<view class="classification-detail" @click="goNext('/pages/carMarket/carMarket')" v-if="false">
				<image :src="imageUrl +'hg-icon3.png'" mode="widthFix"></image>
				<view>车后市场</view>
			</view>
			<view class="classification-detail" @click="goNext('/pages/park-pay/park-pay')">
				<image :src="imageUrl +'a6.png'" mode="widthFix"></image>
				<view>停车缴费</view>
			</view>
			<view class="classification-detail" @click="goNext('/pages/order/order-pay')">
				<image :src="imageUrl +'a8.png'" mode="widthFix"></image>
				<view>欠费补缴</view>
			</view>
			<view class="classification-detail" @click="goNext('/pages/monthlycard/record?kind=0')">
				<image :src="imageUrl +'a7.png'" mode="widthFix"></image>
				<view>月卡办理</view>
			</view>
			<view class="classification-detail" @click="goNext('/pages/parkingReservation/parkingReservation')" v-if="false">
				<image :src="imageUrl +'hg-icon2.png'" mode="widthFix"></image>
				<view>停车预约</view>
			</view>
			<view class="classification-detail" @click="goNext2('/pages/service/service')" v-if="false">
				<image :src="imageUrl +'a10.png'" mode="widthFix"></image>
				<view>更多服务</view>
			</view>

			<view class="classification-detail" @click="goNext('/pages/monthlycard/record?kind=1')">
				<image :src="imageUrl +'a9.png'" mode="widthFix"></image>
				<view>错峰共享</view>
			</view>
			<view class="classification-detail" @click="goNext('/pages/privacyProtection/privacyProtection')" v-if="false">
				<image :src="imageUrl +'a9.png'" mode="widthFix"></image>
				<view>隐私保护</view>
			</view>
			<view class="classification-detail" @click="goNext('/pages/nonDisclosureAgreement/nonDisclosureAgreement')">
				<image :src="imageUrl +'hg-icon3.png'" mode="widthFix"></image>
				<view>保密协议</view>
			</view>
			<view class="classification-detail" @click="goNext('/pages/helpInstructions/helpInstructions')">
				<image :src="imageUrl +'hg-icon1.png'" mode="widthFix"></image>
				<view>帮助说明</view>
			</view>
		</view>
		<view class="list-head-box">
			<view class="head-title">
				<image :src="imageUrl +'hot.png'" mode="widthFix"></image>
				<view>热点资讯</view>
			</view>
			<view class="look-more" @click="tab('/pages/realTimeInfo/realTimeInfo')">
				<view>查看更多</view>
				<image :src="imageUrl +'left.png'" mode="widthFix"></image>
			</view>
		</view>
		<view class="new-list" v-for="(item,index) in realTimeList">
			<view class="new-box" @click="detail(item)">
				<view class="title-name">{{ item.title }}</view>
				<view class="name-time" v-if="false">
					<view>夷陵城市停车</view>
					<view>5小时前</view>
				</view>
			</view>
			<image :src="imageUrl + 'zixun/' +item.img+'.jpg'" mode="aspectFill"></image>
		</view>
		<view class="null"></view>
		<view class="foot">
			<image :src="imageUrl +'foot.png'" mode="widthFix" class="bgfoot-img"></image>
			<view class="foot-box">
				<view class="box-detail">
					<image :src="imageUrl +'1.png'" mode="widthFix"></image>
					<view class="choice-color">首页</view>
				</view>
				<view class="box-detail" @click="tab('/pages/realTimeInfo/realTimeInfo')">
					<image :src="imageUrl +'2.png'" mode="widthFix"></image>
					<view>资讯</view>
				</view>
				<image :src="imageUrl +'5.png'" mode="widthFix" class="alone" @click="tab('/pages/parkingPlace/parkingList')">
				</image>
				<view class="box-detail" @click="tab('/pages/order/order')">
					<image :src="imageUrl +'3.png'" mode="widthFix"></image>
					<view>订单</view>
				</view>
				<view class="box-detail" @click="tab('/pages/my/my')">
					<image :src="imageUrl +'4.png'" mode="widthFix"></image>
					<view>我的</view>
				</view>
			</view>
		</view>
		<view class="black" v-if="showState">
			<view class="alert">
				<view class="alert-head">
					<view>选择地区</view>
					<image :src="imageUrl +'close.png'" mode="widthFix" @click="showClose"></image>
				</view>
				<view class="alert-address">
					<view class="alert-city">
						<view class="alert-title">当前地区</view>
						<view class="alert-name">湖北省</view>
					</view>
					<view class="city">
						<image :src="imageUrl +'adss.png'" mode="widthFix"></image>
						<view>湖北省</view>
					</view>
				</view>
				<view class="list-word">
					<view @click="goTo('A')">A</view>
					<view @click="goTo('B')">B</view>
					<view @click="goTo('C')">C</view>
				</view>
				<scroll-view scroll-y="true" :scroll-into-view="scrollViewId" scroll-with-animation>
					<view class="alert-list" id="area-A">
						<view class="word">A</view>
						<view class="city-name">安徽省</view>
					</view>
					<view class="alert-list" v-for="(item,index) in 20">
						<view class="word"></view>
						<view class="city-name">安徽省</view>
					</view>
					<view class="alert-list" id="area-B">
						<view class="word">B</view>
						<view class="city-name">北京市</view>
					</view>
					<view class="alert-list" v-for="(item,index) in 20">
						<view class="word"></view>
						<view class="city-name">北京市</view>
					</view>
					<view class="alert-list" id="area-C">
						<view class="word">C</view>
						<view class="city-name">重庆市</view>
					</view>
					<view class="alert-list" v-for="(item,index) in 20">
						<view class="word"></view>
						<view class="city-name">重庆市</view>
					</view>
				</scroll-view>
				<view class="nullbox"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get,
		post,
		postForm
	} from '../../api/myHttps';

	export default {
		data() {
			return {
				headHeight: 0,
				navBarHeight: 0,
				imageTop: 0,
				right: 0,
				hasOrderPlate: [],
				hasOrderPlateStr: '',
				platesNums: [],
				rodeOrderList: [],
				word: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
				result: {
					hours: '00',
					minutes: '00'
				},
				showState: false,
				nums: 0,
				scrollViewId: '',
				realTimeList: [{
					title: "上线即破局：终结 “绕圈找位” 的烦恼​",
					img: '1',
					memo: "“以前去海棠路打卡，光找车位就得绕半小时，现在打开小程序直接看余位，导航过去一步到位！” 峡江社区居民龙丽萍的感慨，道出了夷陵车主的共同体验。随着 “夷陵城市停车” 小程序正式启用，这一由夷陵经发控股集团打造的智慧平台，已接入包括峡江路生态停车场在内的多个场地，覆盖森林公园、河心公园、商业区等核心区域。车主只需在微信端搜索，即可实时查看目标停车场的剩余泊位数量、具体位置，配合精准导航功能，彻底告别 “盲找车位” 的窘境。以网红打卡地峡江路为例，其 89 个生态车位的动态信息实时同步至平台，春季樱花季游客停车效率提升近 3 倍。​"
				}, {
					title: "全程无感化：缴费离场 “零停留”",
					img: '2',
					memo: "小程序的核心便捷性体现在 “先离场后付费” 的智能流程中。车主绑定车牌并开通无感支付后，车辆驶入停车场无需取卡，离场时系统自动识别车牌并完成扣费，全程无需开窗扫码或排队缴费。这种由车牌识别技术支撑的无人值守模式，不仅让峡江路等停车场的通行效率提升 40%，更避免了雨天、酷暑天的缴费不便。同时，平台支持微信、支付宝多渠道支付，还可直接在线开具电子发票，解决了 “报销找票” 的痛点。​"
				}, {
					title: '服务一体化：从包月到优惠 “一键搞定”​',
					img: '3',
					memo: '针对不同车主需求，小程序整合了多元化便捷服务：通勤族可办理 “车场包期”，每月 240 元即可畅享固定车位；临时停车用户将能领取平台发放的优惠券，进一步降低停车成本。新能源车主更能享受专属福利，配合停车场内的充电桩资源，实现 “停车 + 补能” 一站式解决。此外，小程序还实时推送停车新规、场地维护等资讯，让车主随时掌握最新动态。​'
				}, {
					title: '跨平台互通：全市停车 “一卡通”',
					img: '4',
					memo: '依托宜昌市 “全市一个停车场” 智慧体系，夷陵停车小程序实现了与市级平台的数据互通。宜昌城市停车 APP 用户可直接在夷陵区域内缴费离场，无需重复注册操作。这种 “双平台支撑” 模式，让车主在夷陵与宜昌城区间通行时，停车服务无缝衔接，真正实现 “一城通停、一码通行”。​'
				}]
			}
		},
		onShow() {
			// 获取胶囊按钮位置
			// 获取系统信息（主要是状态栏高度）
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const systemInfo = uni.getSystemInfoSync();

			// 计算顶部总高度：从屏幕顶部到导航栏底部的距离
			const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
			const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
			const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

			// console.log('状态栏高度:', statusBarHeight);
			// console.log('胶囊按钮信息:', menuButtonInfo);
			// console.log('导航栏高度:', navBarHeight);
			// console.log('顶部总高度:', totalTopHeight);
			this.headHeight = totalTopHeight
			this.navBarHeight = menuButtonInfo.height
			this.imageTop = menuButtonInfo.top
			this.right = menuButtonInfo.width + 20



			let ownerId = uni.getStorageSync("ownerId");
			if (ownerId) {
				this.hasOrderPlate = [];
				this.hasOrderPlateStr = '';
				this.rodeOrderList = [];
				this.getPlates();
				this.getRodeOrderByOwner();
			}

			uni.authorize({
				scope: 'scope.userLocation',
				success() {
					uni.getLocation({
						type: 'wgs84',
						success: function(res) {
							const latitude = res.latitude; // 纬度
							const longitude = res.longitude; // 经度
							// console.log('当前位置的纬度：', latitude);
							// console.log('当前位置的经度：', longitude);
							uni.setStorageSync("userLongitude", longitude);
							uni.setStorageSync("userLatitude", latitude);
						},
						fail: function(err) {
							console.error('获取位置失败', err);
							uni.setStorageSync("userLongitude", 116.296187);
							uni.setStorageSync("userLatitude", 40.052857);
						}
					});
				},
				fail() {
					console.error('授权失败');
				}
			});
		},
		onLoad() {
			uni.$on('init', () => {
				this.getPlates();
				this.getRodeOrderByOwner();
			})
			post('/city-mobile/systemSet', null).then((res) => {
				uni.setStorageSync("systemSet", res);
			})
		},
		methods: {
			plateManage() {
				let ownerId = uni.getStorageSync("ownerId");
				get('/city-mobile/plate/bindPlate/' + ownerId).then((res) => {
					console.log(res);
					if (this.platesNums.length === 0) {
						uni.navigateTo({
							url: '/pages/vehiclemanagement/licenseplatebinding'
						})
					} else {
						uni.navigateTo({
							url: '/pages/vehiclemanagement/vehiclemanagement'
						})
					}
				})
			},
			sendEvent() {
				const set = uni.getStorageSync("systemSet") || [];
				const getValue = key => {
					const item = set.find(i => i.keyword === key);
					return item ? item.dataValue : null;
				};
				const tmplIds = [
					getValue('applets_temp_in'),
					getValue('applets_temp_out'),
					getValue('applets_temp_arrear')
				].filter(id => id !== '');
				console.log('tmplIds', tmplIds);

				if (tmplIds.length) {
					uni.requestSubscribeMessage({
						tmplIds,
						success(res) {
							console.log(res);
						}
					});
				}
				// tmplIds: [
				//   'sWeRGQW01ggpeoFaKM9UnTf_QFN3gUSocyQGbvFkBvk',
				//   'Z-tnBbKBxZY_HVbpIFY-0ICZasJfRuaBzk7ZC5jZ6LI',
				// ],
			},
			wugan() {
				uni.navigateToMiniProgram({
					appId: 'wxbcad394b3d99dac9',
					path: '/pages/auth-creditpay/auth-creditpay',
					extraData: {
						mchid: uni.config.mchid,
						openid: uni.getStorageSync('openid'),
						plate_number: plateNumber, // 车牌号
						plate_color: plateColor, // 车牌颜色
						trade_scene: 'PARKING' // 使用场景
					}
				});
			},
			detail(item) {
				uni.navigateTo({
					url: '/pages/newsDetail/newsDetail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			goTo(letter) {
				this.scrollViewId = `area-${letter}`;
			},
			goPay() {
				uni.navigateTo({
					url: '/pages/order/aoverduepay?ownerId=' + uni.getStorageSync('ownerId')
				})
			},
			goNext(uri) {
				this.sendEvent();

				let phone = uni.getStorageSync("phone");
				if (!phone) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				uni.navigateTo({
					url: uri
				})
			},
			goNext2(uri) {
				this.sendEvent();

				uni.navigateTo({
					url: uri
				})
			},
			showAlert() {
				// this.showState = true
			},
			showClose() {
				this.showState = false
			},
			go() {
				uni.navigateTo({
					url: '/pages/index2/index2'
				})
			},
			tab(e) {
				uni.switchTab({
					url: e
				})
			},
			getPlates() {
				// 获取车牌
				let ownerId = uni.getStorageSync("ownerId");
				get('/city-mobile/plate/bindPlate/' + ownerId).then((res) => {
					this.platesNums = res;
					this.platesNums.forEach((item, index) => {
						if (this.hasOrderPlate.indexOf(item.plate) < 0) {
							this.hasOrderPlate.push(item.plate);
							this.hasOrderPlateStr = this.hasOrderPlate.toString();
							console.log("hasOrderPlateStr:", this.hasOrderPlateStr);
						}
					});
					if (this.platesNums.length === 0) {
						this.platesNums = [];
					}
				})
			},
			getRodeOrderByOwner() {
				let ownerId = uni.getStorageSync("ownerId");
				let params = {
					"ownerId": ownerId,
				}
				postForm('/city-pay/inroadPay/calcListRoadOrderByOwner', params).then((res) => {
					this.rodeOrderList = res;
					// if (this.rodeOrderList.length > 0) {
					//   this.result = this.getTimeDiff(this.rodeOrderList[0].inTime, this.rodeOrderList[0].doTime);
					// }
				})
			},
			getTimeDiff(startTime, endTime) {
				// 首先处理iOS不支持的日期格式问题
				const fixTime = (timeStr) => {
					if (!timeStr) return NaN; // 如果输入为空，则返回NaN
					return new Date(timeStr.replace(' ', 'T')); // 将空格替换为'T'，使其符合ISO 8601标准
				};

				const start = fixTime(startTime);
				const end = fixTime(endTime);
				// 检查日期是否有效
				if (isNaN(start) || isNaN(end)) {
					console.error('Invalid date format');
					return {
						hours: 0,
						minutes: 0
					};
				}

				// 确保结束时间晚于开始时间
				if (end < start) {
					console.warn('End time is before start time');
					return {
						hours: 0,
						minutes: 0
					};
				}
				const diffMs = end - start; // 得到毫秒数差异
				const totalMinutes = Math.floor(diffMs / 60000); // 转换为分钟
				const hours = Math.floor(totalMinutes / 60); // 计算小时数
				const minutes = totalMinutes % 60; // 剩余分钟数
				return {
					hours: String(hours).padStart(2, '0'),
					minutes: String(minutes).padStart(2, '0')
				};
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 10) {
				console.log(111)
				this.nums = 1
			} else {
				this.nums = 0
				console.log(222)
			}
		},

	}
</script>

<style lang="scss">
	page {
		background-color: #F4FAF7;
	}

	.bg-img {
		width: 750rpx;
		height: 520rpx;
		position: absolute;
		top: 0;
	}

	.contentbox {
		width: 750rpx;
		position: fixed;
		top: 0;
		z-index: 999;
		transition: background-color 500ms;
		background-color: #ffffff00;

		.container {
			width: 750rpx;
			position: absolute;
			bottom: 0rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 86rpx;

			.logo {
				margin-left: 40rpx;
				width: 265rpx;
				height: 64rpx;
				position: relative;
				z-index: 9999;
			}

			.seandcode {
				width: 64rpx;
				height: 64rpx;
				position: relative;
				z-index: 9999;
			}
		}
	}

	.card {
		width: 670rpx;
		height: 320rpx;
		position: relative;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		margin-top: 12rpx;
		box-shadow: 0px 4px 12px rgba(167, 188, 195, 0.6);

		.certification {
			width: 110rpx;
			height: 32rpx;
			position: absolute;
			right: 10rpx;
			top: 26rpx;
		}

		.prompt {
			width: 100%;
			text-align: center;
			position: absolute;
			bottom: 14rpx;
			font-size: 24rpx;
			color: rgba(40, 40, 40, 0.6);
		}

		.bg2-img {
			width: 670rpx;
			height: 360rpx;
			position: absolute;
			z-index: 6;
		}

		.bg3-img {
			width: 670rpx;
			height: 360rpx;
			position: absolute;
		}

		.address-box {
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			margin-left: 10rpx;
			position: relative;
			z-index: 999999;

			.address-img {
				width: 64rpx;
				height: 64rpx;
			}

			view {
				font-size: 24rpx;
				color: #1C274C;
			}

			.tab-img {
				width: 14rpx;
				height: 14rpx;
			}
		}

		.top1 {
			margin-top: 56rpx;
		}

		.top2 {
			margin-top: 76rpx;
		}

		.cart-box {
			width: 620rpx;
			display: flex;
			justify-content: space-between;
			margin-left: 30rpx;
			position: relative;
			z-index: 7;

			.cart-detail {
				.head-name {
					font-size: 48rpx;
					color: #1C274C;
					font-weight: 700;
				}

				.number {
					font-size: 32rpx;
					color: #1C274C;
					font-weight: 700;
				}

				.timing {
					font-size: 24rpx;
					color: #1C274C;
					margin-top: 10rpx;
					margin-bottom: 10rpx;

					text {
						font-size: 42rpx;
						font-weight: 700;
						color: #5ADA7A;
					}
				}

				.time {
					font-size: 20rpx;
					color: rgba(40, 40, 40, 0.6);
				}

				.pay {
					width: 160rpx !important;
					margin-top: 26rpx !important;
				}

				.go {
					width: 136rpx;
					height: 48rpx;
					margin-top: 20rpx;
					border-radius: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: linear-gradient(to right, #00BBFF, #5ADA7A);

					view {
						font-size: 24rpx;
						color: #FFFFFF;
						margin-right: 10rpx;
					}

					image {
						width: 14rpx;
						height: 14rpx;
					}
				}
			}
		}

		.cart-img {
			width: 300rpx;
			height: 140rpx;
			position: absolute;
			bottom: 90rpx;
			right: 20rpx;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.classification-box {
		width: 720rpx;
		display: flex;
		flex-wrap: wrap;
		position: relative;

		.classification-detail {
			width: 20%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 30rpx;

			image {
				width: 90rpx;
				height: 90rpx;
			}

			view {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				color: #1C274C;
				line-height: 36rpx;
			}
		}
	}

	.list-head-box {
		width: 690rpx;
		margin-top: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.head-title {
			display: flex;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			view {
				font-size: 36rpx;
				color: #1C274C;
				font-weight: 700;
			}
		}

		.look-more {
			display: flex;
			align-items: center;

			image {
				width: 24rpx;
				height: 24rpx;
			}

			view {
				font-size: 26rpx;
				color: rgba(40, 40, 40, 0.6);
				margin-right: 10rpx;
			}
		}
	}

	.new-list {
		width: 690rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;

		.new-box {
			width: 403rpx;
			height: 154rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			margin-left: 20rpx;

			.title-name {
				width: 100%;
				font-size: 32rpx;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.name-time {
				width: 100%;
				display: flex;

				view {
					font-size: 24rpx;
					margin-right: 10rpx;
					color: rgba(40, 40, 40, 0.6);
				}
			}
		}

		image {
			width: 220rpx;
			height: 154rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
		}
	}

	.null {
		width: 750rpx;
		height: 220rpx;
	}

	.foot {
		width: 750rpx;
		height: 198rpx;
		position: fixed;
		bottom: 0;

		.bgfoot-img {
			width: 750rpx;
			height: 198rpx;
		}

		.foot-box {
			width: 650rpx;
			height: 94rpx;
			position: absolute;
			top: 60rpx;
			left: 50rpx;
			display: flex;
			justify-content: space-between;

			.alone {
				width: 100rpx;
				height: 100rpx;
				margin-top: -20rpx;
			}

			.box-detail {
				width: 90rpx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				view {
					font-size: 22rpx;
					color: rgba(40, 40, 40, 0.6);
					line-height: 36rpx;
					margin-top: 10rpx;
					width: 100%;
					text-align: center;
				}

				.choice-color {
					color: #1C274C !important;
				}
			}
		}
	}

	.black {
		width: 100%;
		background-color: rgba(28, 39, 76, 0.60);
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		z-index: 999999999999999;

		.alert {
			width: 750rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			border-radius: 36rpx 36rpx 0 0;

			.alert-head {
				width: 690rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 30rpx;
				height: 48rpx;
				margin-left: 30rpx;

				view {
					font-size: 32rpx;
					color: #1C274C;
				}

				image {
					width: 18rpx;
					height: 18rpx;
				}
			}

			.alert-address {
				width: 690rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;
				height: 68rpx;
				margin-left: 30rpx;
				border-radius: 8rpx;
				background: #F4FAF7;
				margin-bottom: 40rpx;

				.alert-city {
					display: flex;
					align-items: center;

					.alert-title {
						font-size: 28rpx;
						color: #1C274C;
						font-weight: 600;
						margin-left: 20rpx;
					}

					.alert-name {
						font-size: 28rpx;
						color: rgba(28, 39, 76, 0.60);
						margin-left: 20rpx;
					}
				}

				.city {
					display: flex;
					align-items: center;
					margin-right: 20rpx;

					image {
						width: 32rpx;
						height: 32rpx;
					}

					view {
						font-size: 28rpx;
						color: #24A7CE;
						margin-left: 10rpx;
					}
				}
			}

			.list-word {
				width: 30rpx;
				position: absolute;
				right: 16rpx;
				top: 216rpx;
				z-index: 9999;

				view {
					width: 100%;
					text-align: center;
					font-size: 20rpx;
					font-weight: 600;
					line-height: 24rpx;
				}
			}

			scroll-view {
				width: 100%;
				height: 800rpx;
			}

			.nullbox {
				width: 750rpx;
				height: 40rpx;
				padding-bottom: env(safe-area-inset-bottom);
			}

			.alert-list {
				width: 690rpx;
				height: 68rpx;
				display: flex;
				align-items: center;
				margin-left: 30rpx;

				.word {
					width: 57rpx;
					font-size: 24rpx;
					color: rgba(28, 39, 76, 0.60);
					text-align: center;
				}

				.city-name {
					font-size: 28rpx;
					color: #1C274C;
				}
			}
		}
	}
</style>